//日志详情
<template>
  <div class="">
    <header><nav-bar :title="name" /></header>
    <main>
      <div class="banner-boxa"></div>
      <div class="content-box">
        <div class="titleBox">
          <div class="price-t between-box">
            <div class="head-portrait">
                <van-image
                  round
                  width="2.22rem"
                  height="2.22rem"
                  fit="cover"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
            <span class="doc-l">医生姓名</span>
          </div>
          <div class="title-text text-overflow">
            欧洲之星Fotona 4d pro 全面部单模式.支持验真 欧洲之星Fotona 4d pro
            全面部单模式.支持验真
          </div>
        </div>
        <div class="Product-details">
          <div class="detail-name">相关产品</div>
          <div class="detail-con">
            <commodity />
          </div>
        </div>
      </div>
    </main>
    
  </div>
</template> 

<script>
import navBar from "@/components/navBar";//头部标签
import commodity from "@/components/commodity"//商品列表
export default {
  props: {},
  components: {
    navBar,
    commodity
  },
  data() {
    return {
      name: "日志详情",
    };
  },
  methods: {
    
  },

  created() {},

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
@import "../../style/common.sass";
//只显示几行，剩余省略号
.text-overflow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
//两端对齐
.between-box {
  display: flex;
  justify-content: space-between;
}
//图片大小
.img-size {
  width: 100%;
  height: 100%;
}
.banner-boxa {
  height: 15.19rem;
  background-color: $bgc-a;
  margin-bottom: -1rem;
}
.content-box {
  background-color: $bgc-b;
  height: 30rem;
  border-radius: 0.97rem 0.97rem 0rem 0rem;
  .titleBox {
    height: 10rem;
    background-color: #fff;
    border-radius: 0.97rem 0.97rem 0rem 0rem;
    padding: $layout-size;
    .price-t {
      padding-top: 1.35rem;
      font-size: 1.19rem;
      .doc-l {
        flex: 1;
        color: $price-c;
        font-size: .86rem;
        color: #333;
        margin-left: .54rem;
        font-weight: 600;
      }
    }
    .title-text {
      height: 2.7rem;
font-size: 0.7rem;
      color: #666;
      line-height: 1.35rem;
      margin-top: 0.54rem;
      font-family: PingFangSC-Semibold, PingFang SC;
    }
    
  }
  .Product-details {
    background-color: #f4f4f4;
    padding: $layout-size;
    margin-top: $box-m;
    .detail-name {
      padding-top: 0.86rem;
      font-size: 0.97rem;
      color: #333333;
      font-weight: 600;
      margin-bottom: $box-m;
    }
    .detail-con {
      font-size: $box-m;
      color: #666666;
    }
  }
}
footer {
  padding: $layout-size;
  div {
    width: 47%;
    height: 2.38rem;
    border: 0.03rem solid #2fb6a5;
    border-radius: 0.54rem;
    color: #2fb6a5;
    text-align: center;
    line-height: 2.38rem;
    &:hover{
      background-color: #20BCA9;
      color: #fff;
    }
  }
}
</style>